<template>
  <div class="tags_container">
    <h3 class="title">个人标签</h3>
    <div class="personal_tags">
      <div class="tag_list">
        <span class="tag_item"
          v-for="(item, index) in personal_tags" :key="index"
          @click.stop="clickTags(item.name)">
          <span class="name">{{ item.name }}</span>
          <span class="count">{{ item.value }}</span>
          <span class="bg_wrap"
            :style="{ backgroundColor: globalInfo.contentInfo.bgcolor, opacity: opacity(index) }">
          </span>
        </span>
      </div>
    </div>
    <h3 class="title">技术标签</h3>
    <div class="tech_tags">
      <div class="tag_list">
        <span class="tag_item"
          v-for="(item, index) in tech_tags" :key="index"
          @click.stop="clickTags(item.name)">
          <span class="name">{{ item.name }}</span>
          <span class="count">{{ item.value }}</span>
          <span class="bg_wrap"
            :style="{ backgroundColor: globalInfo.contentInfo.bgcolor, opacity: opacity(index) }">
          </span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'tags',
  computed: {
    ...mapState({
      globalInfo: state => state.Global.globalInfo,
      personal_tags: state => state.Global.personal_tags,
      tech_tags: state => state.Global.tech_tags
    })
  },
  methods: {
    opacity(index) {
      return (this.globalInfo.contentInfo.opacity * 1 + 0.4 > 0.88 ? 
        0.88 : this.globalInfo.contentInfo.opacity * 1 + 0.4) 
        - index * 0.05
    },
    clickTags(name) {
      this.$store.commit('updateTagsInfo', name)
    }
  }
}
</script>

<style lang="less" scoped>
  .tags_container {
    height: 100%;
    min-height: calc(100vh - 90px);
    background: #fff;
    margin: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    .title {
      line-height: 40px;
      font-size: 20px;
      margin: 20px 0;
    }
    .personal_tags,
    .tech_tags {
      height: auto;
      .tag_list {
        display: flex;
        flex-wrap: wrap;
        .tag_item {
          display: inline-block;
          height: 30px;
          line-height: 30px;
          margin: 20px;
          padding: 2px 18px;
          border-radius: 17px;
          font-size: 14px;
          color: #fff;
          position: relative;
          cursor: pointer;
          .name {
            position: relative;
            z-index: 1;
            margin-right: 6px;
          }
          .count {
            position: relative;
            z-index: 1;
          }
          .bg_wrap {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border-radius: 17px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          }
        }
      }
    }
  }
</style>
